<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <!-- 
  1.app组件用来管理所有的组件，而vm则只需要管理app组件即可

  2.关于VueComponent：
						1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

						2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
							即Vue帮我们执行的：new VueComponent(options)。

						3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

						4.关于this指向：
								(1).组件配置中：
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
								(2).new Vue(options)配置中：
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

						5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
							Vue的实例对象，以后简称vm。
            6.vm和vc的区别: el(vc不能有el)和data(vc的data只能写成函数)
 -->
  <body>
    <div id="root"></div>

    <script>
      const student = Vue.extend({
        template: `
           <div>
             <h2> 学生姓名:{{name}}</h2>
             <h2> 年龄:{{age}}</h2>
           </div>
         `,
        data() {
          return {
            name: '尚硅谷',
            age: 18,
          };
        },
      });

      const school = Vue.extend({
        template: `
           <div>
             <h2> 学校名称:{{name}}</h2>
             <h2> 学校地址:{{address}}</h2>
             <student></student>
           </div>
         `,
        data() {
          return {
            name: '尚硅谷',
            address: '北京',
          };
        },
        components: {
          student,
        },
      });

      const hello = Vue.extend({
        template: `
        <h2>{{msg}}</h2>
        `,
        data() {
          return {
            msg: 'hello,world!!',
          };
        },
      });

      const app = Vue.extend({
        template: `
        <div>
          <school></school>
          <hello></hello> 
        </div>
        `,
        components: {
          school,
          hello,
        },
      });
      //创建Vue实例,得到 ViewModel
      const vm = new Vue({
        template: `
        <app></app>
        `,
        el: '#root',
        data: {},
        methods: {},
        components: {
          app,
        },
      });
    </script>
  </body>
</html>
